<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插槽机制</title>



</head>
<body>

<div id="app">
     <box :data="list">
          <template v-slot:default="scope">
                 {{scope.row.id}}-{{scope.row.title}}
          </template>
     </box>

</div>

</body>
<script src="../../../lib/vue.global.js"></script>
<script>

    // const box = {
    //      template:'<div><slot></slot></div>' // 匿名插槽
    // }


    // const box = {
    //     template:'<div><slot>default value</slot></div>' // 匿名插槽-默认值
    // }


    // const box = {
    //     template:'<div>' +
    //         '<div><slot name="up">up</slot></div>' +  // 具名插槽
    //         '<div><slot name="down">down</slot></div>' +
    //         '</div>' // 匿名插槽-默认值
    // }


    // const box = {  // 匿名插槽和具名插槽的混用
    //      template:'<div><div><slot>default</slot></div>' +
    //          '<div><slot name="content">content</slot></div>' +
    //          '</div>'
    // }






    /**
     *   作用域插槽
     * */

/*    const box =  {
          data(){
              return {
                  content:'hello34'
              }
          },
          template:'<div> <slot :content="content"></slot></div>'
    }*/



    const row = {
        props: ['content'],
        template: '<div>{{content}}</div>'
    }


    const box = {
        props: ['data'],
        components:{
            row
        },
        template: '<div v-for="row in data" :content="row.title"><slot :row="row"></slot></div>'
    }



    const createApp=Vue.createApp;
    createApp({
        data(){

             return {
                  message:'hello slot',
                 list: [{
                      id:1,
                     title: 'title1'
                 }, {
                      id:2,
                     title: 'title2'
                 }]
             }
        },
        components:{
            box
        }
    }).mount('#app')



</script>
</html>